/* Reset */
* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Root Variables */
:root {
  --blue: #2c5eac;
  --white: #ffffff;
  --black: #000000;
  --body: #1e1e1e;
  --black-60: #4b4b4b;
  --C4C4C4: #c4c4c4;
  --417462: #417462;
  --D57B44: #d57b44;
  --C45246: #c45246;
  --ft3-green: #6db290;
  --grey: #333333;
  --dark-green: #417462;
  --red: #c45246;
  --A46A5E: #a46a5e;
  --8B8633: #8b8633;
  --2A5F8F: #2a5f8f;
  --pfmd-red: #f05359;
  --pfmd-blue: #2d62cf;
  --pfmd-dark-blue: #1a2f45;
  --pfmd-red: #f15d63;
  --pfmd-violet: #6b509a;
  --pfmd-orange: #ea4839;
  --mcip-pink: #ce1c67;
  --conception: #77b72a;
}

/* Global Styles */
img {
  width: 100%;
}

strong {
  font-weight: 600;
}

.italic {
  font-style: italic;
  font-family: "Source Serif 4";
}

/* Typography */
h1 {
  font-size: clamp(2.25rem, 2.117rem + 0.4255vw, 2.5rem);
  color: var(--black);
  font-family: "aktiv-grotesk";
  font-weight: 600;
  line-height: normal;
}

h2 {
  font-size: clamp(2rem, 1.867rem + 0.4255vw, 2.25rem);
  color: var(--black);
  font-family: "aktiv-grotesk";
  font-weight: 600;
  line-height: 1.2em;
}

h3 {
  font-size: clamp(1.25rem, 1.117rem + 0.4255vw, 1.5rem);
  color: var(--black);
  font-family: "aktiv-grotesk";
  font-weight: 600;
  line-height: normal;
}

h4 {
  font-size: 20px;
  color: var(--black);
  font-family: "aktiv-grotesk";
  font-weight: 600;
  line-height: normal;
}

p.body {
  font-size: clamp(1rem, 0.9335rem + 0.2128vw, 1.125rem);
  color: var(--body);
  font-family: "aktiv-grotesk";
  font-weight: 400;
  line-height: 1.5em;
}

p.body--medium {
  font-size: clamp(1.125rem, 1.0585rem + 0.2128vw, 1.25rem);
  font-family: "aktiv-grotesk";
  font-weight: 400;
  line-height: 1.5em;
}

p.body--medium.source {
  font-family: "Source Serif 4";
}

p.body--big {
  font-size: clamp(1.25rem, 1.117rem + 0.4255vw, 1.5rem);
  color: var(--body);
  font-family: "aktiv-grotesk";
  font-weight: 400;
  line-height: 1.5em;
}

p.body--big.source {
  font-family: "Source Serif 4";
}

p.quote-person {
  font-family: "aktiv-grotesk";
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
}

p.quote-person .italic {
  color: var(--black-60);
}

/* Links and Buttons */
a.link {
  text-decoration-line: underline;
}

button.link {
  padding: 0;
  border: 0;
  background: none;
  text-decoration-line: underline;
  font-size: clamp(1rem, 0.867rem + 0.4255vw, 1.25rem);
  font-family: "Source Serif 4";
  line-height: 1.5em;
  font-weight: 400;
  text-align: left;
}

h1 .link {
  font-size: clamp(2.25rem, 2.117rem + 0.4255vw, 2.5rem);
}

/* Utility Classes */
.w-400 {
  font-weight: 400;
}

.w-600 {
  font-weight: 600;
}
.blue {
  color: var(--blue);
}

.green {
  color: var(--ft3-green);
}

.grey {
  color: var(--grey);
}

.orange {
  color: var(--D57B44);
}
.red {
  color: var(--red);
}

.brown {
  color: var(--A46A5E);
}
.dark-green {
  color: var(--dark-green);
}

.mustard {
  color: var(--8B8633);
}

.light-blue {
  color: var(--2A5F8F);
}

.pfmd-red {
  color: var(--pfmd-red);
}

.pfmd-dark-blue {
  color: var(--pfmd-dark-blue);
}

.pfmd-blue {
  color: var(--pfmd-blue);
}

.pfmd-red {
  color: var(--pfmd-red);
}

.pfmd-violet {
  color: var(--pfmd-violet);
}

.pfmd-orange {
  color: var(--pfmd-orange);
}

.mcip-pink {
  color: var(--mcip-pink);
}

.conception {
  color: var(--conception);
}

.margin-top-180 {
  margin-top: 180px;
}

.margin-top-200 {
  margin-top: 200px;
}

.margin-top-300 {
  margin-top: 300px;
}

.margin-bot-100 {
  margin-bottom: 100px;
}

.margin-bot-180 {
  margin-bottom: 180px;
}

.padding-top-150 {
  padding-top: 150px;
}

.padding-bot-180 {
  padding-bottom: 180px;
}

hr {
  width: 100%;

  background: var(--C4C4C4);
}

hr.projects {
  max-width: 972px;
  position: relative;
  left: clamp(0rem, -14.7799rem + 24.1304vw, 6.9375rem);
  background-color: var(--C4C4C4);
}

/*Header */

.synergist-nav__wrapper {
  display: flex;
  align-items: center;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  max-width: 1360px;
  padding: 39px 20px;
  margin: 0 auto;
}

.synergist-nav__menu {
  display: flex;
  gap: 36px;
}

.synergist-nav__item {
  list-style: none;
}

.synergist-nav__link {
  font-family: "aktiv-grotesk";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #000000;
  text-decoration: none;
}

.synergist-nav__contact,
.contact--mobile {
  color: var(--blue);
  font-family: "aktiv-grotesk";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.contact--mobile {
  display: none;
}

.synergist-nav__toggle {
  display: none;
  background: none;
  border: none;
  color: #000000;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile styles */
@media (max-width: 980px) {
  .synergist-nav__wrapper {
    padding: 20px;
  }
  .synergist-nav__menu {
    display: none;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 20px;
  }

  .synergist-nav__menu--active {
    display: flex;
    max-width: -webkit-fill-available;
  }

  .synergist-nav__toggle {
    display: block;
  }

  .synergist-nav__wrapper--mobile {
    position: relative;
  }

  .synergist-nav__contact {
    display: none;
  }

  .contact--mobile {
    display: block;
  }
}

/*Footer */

.synergist-footer__wrapper {
  max-width: 1360px;
  padding: 40px 20px 12px;
  margin: 0 auto;
}

.synergist-footer__text {
  color: #1a2f45;
  text-align: center;
  font-family: "Source Sans 4";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

/* Layout Wrappers */

.content-wrapper,
.content-wrapper--hero,
.sections-wrapper {
  max-width: 1360px;
  margin: 0 auto;
}

.sections-wrapper {
  padding: 0 20px;
}

.content-wrapper--hero {
  display: grid;
  grid-template-columns: 164px 1fr;
  column-gap: 112px;
  padding: 179px 0 280px;
}

.hero-content {
  max-width: 860px;
}

.hero-content--image {
  display: flex;
  gap: 36px;
  align-items: center;
}

.sections-wrapper {
  display: grid;
  grid-template-columns: 164px 1fr;
  column-gap: 112px;
}

/* Bottom Navigation */

.bottom-navigation-wrapper {
  max-width: 1440px;
  padding: 30px 20px;
  margin: 0 auto;
  display: flex;
  margin-top: 180px;
  background: #fafafa;
  justify-content: space-around;
}

.bottom-navigation-wrapper .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.bottom-navigation-wrapper .content img {
  max-width: 150px;
}

/* Side Navigation */
.side-nav--wrapper {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 16px;
  margin-top: -125px;
  position: relative;
}

.graphic-wrapper:after {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  left: 17px;
  background: #9b9a9a;
  opacity: 1;
}

.side-nav {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: fit-content;
  position: sticky;
  top: 40px;
}

.side-nav__select {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: max-content;
  font-size: 16px;
  font-family: "aktiv-grotesk";
}

/* When the select dropdown is fixed */
.side-nav__select.fixed {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: top 0.2s ease-out;
  width: 95%;
  margin: 0 auto;
}

.link-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-nav__link {
  color: var(--black);
  font-family: "aktiv-grotesk";
  font-size: 16px;
  font-weight: 600;
  opacity: 0.3;
  text-decoration: none;
}

.side-nav__link.secondary {
  color: var(--black-60);
  font-family: "Source Serif 4";
  font-size: 16px;
  font-weight: 400;
  opacity: 0.3;
  text-decoration: none;
  font-style: italic;
  display: inline-flex;
}

.side-nav__link.secondary::before {
  content: "";
  width: 12px;
  height: 1px;
  background-color: var(--C4C4C4);
  margin: 11px 8px 0 0;
  flex-shrink: 0;
}

.side-nav__link.active {
  opacity: 1;
}

/* Section Styles */
.section-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 38px;
}

.section-wrapper--single {
  display: flex;
  flex-direction: column;
}

.section-wrapper.small {
  max-width: 859px;
  grid-template-columns: 1fr;
  position: relative;
  left: clamp(0rem, -14.7799rem + 24.1304vw, 6.9375rem);
}

.section-wrapper.gap .left-content {
  max-width: 447px;
}

.section--hidden {
  display: none;
}

/* Content Wrappers */

.left-content,
.right-content {
  min-width: 0;
  width: 100%;
}

.body-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.body-wrapper--16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.body-wrapper--40 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.body-wrapper--48 {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hidden {
  display: none;
}

.items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.icon-item {
  display: inline-flex;
  gap: 20px;
}

.icon-item img {
  max-width: 24px;
}

/* Intro Section Style */
.quote {
  max-width: 336px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Financial Tabs */
.accordion-header {
  border-top: 1px solid #c4c4c4;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-header .toggle-icon {
  font-size: 24px;
}

.accordion-content {
  display: none;
  margin-bottom: 40px;
}

.financial-stats {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.financial-stats:last-of-type {
  margin: 0;
}

p.financial-label {
  color: #636363;
  font-family: "Source Serif 4";
  font-size: clamp(1rem, 0.9335rem + 0.2128vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5em;
}

p.financial-value {
  color: #a5004c;
  color: var(--blue);
  font-family: "aktiv-grotesk";
  font-size: clamp(2.25rem, 2.117rem + 0.4255vw, 2.5rem);
  font-weight: 600;
  line-height: normal;
}

/* Partners Grid */
.partners-gird {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(137px, 1fr));
}

.projects .section-wrapper {
  gap: 112px;
  max-width: 972px;
  position: relative;
  left: clamp(0rem, -14.7799rem + 24.1304vw, 6.9375rem);
}

.project-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-item__link {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  align-items: start;
}

.project-item__link a {
  display: flex;
}

.project-item.first {
  border-right: 1px solid var(--C4C4C4);
  padding: 0 20px 63px 0;
}

.project-item.second {
}

.project-item.third {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: var(--C4C4C4);

  padding: 40px 10px 0 0;
}

.project-item.forth {
  padding-top: 40px;
}

.project-item img {
  max-width: 187px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  column-gap: 24px;
  row-gap: 40px;
}

/* Testimonial Cards */

.testimonial-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.testimonial-card__body {
  font-size: clamp(1.125rem, 1.0585rem + 0.2128vw, 1.25rem);
  font-family: "Source Serif 4";
  font-weight: 400;
  line-height: 1.3em;
}

.testimonial-card__person-name {
  font-family: "aktiv-grotesk";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.testimonial-card__person-position {
  font-family: "Source Serif 4";
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  line-height: normal;
}

/* Sliders */

.silder-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.slider-navigation__controls {
  flex-shrink: 0;
  display: inline-flex;
  gap: 12px;
}

.slider-navigation__controls button {
  padding: 0;
  background: none;
  border: 0;
}

.slider-navigation__controls button.disabled {
  opacity: 0.5;
}

/* Image Cards */
.image-cards__wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.image-card__card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-width: 0;
  background-color: #fff;
}

.image-card__card-text {
  font-size: clamp(1rem, 0.9335rem + 0.2128vw, 1.125rem);
  color: #636363;
  font-family: "Source Serif 4";
  font-weight: 400;
  line-height: 1.5em;
}

/* Tabs */

.tab-container {
  position: sticky;
  top: 0px;
}

.tab {
  display: flex;
  width: 100%;
}

.tab__buttons {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tab__button {
  background: none;
  border: none;
  text-align: left;
  font-size: clamp(1.125rem, 1.0585rem + 0.2128vw, 1.25rem);
  font-family: "aktiv-grotesk";
  font-weight: 600;
  line-height: 1.5em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding-right: 36px;
}

.tab__button--first {
  margin-bottom: 16px;
}

.tab__button--active {
  max-width: 100%;
}

.tab__button--active:not(.tab__button--first) {
  padding: 24px;
}

.tab__content {
  display: none;
}

.tab__content--active {
  display: block;
}

/* Team Grids */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 36px;
}

.team-grid--3col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(159px, 1fr));
  gap: 20px;
}

.team-grid__member-name {
  font-size: clamp(1rem, 0.9335rem + 0.2128vw, 1.125rem);
  font-family: "aktiv-grotesk";
  font-weight: 600;
  line-height: 1.5em;
}

.team-grid__member-position {
  color: #333;
  font-family: "Source Serif 4";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
}

.partners-grid--3col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.partners-grid--3col.small {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.financial-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.financial-grid--2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

/* Responsive */

@media (max-width: 980px) {
  .hero {
    padding: 0 20px;
  }
  .content-wrapper--hero {
    grid-template-columns: 1fr;
  }

  .section-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .sections-wrapper {
    gap: 70px;
  }

  .section-wrapper.gap .left-content {
    max-width: 100%;
  }

  .projects .section-wrapper {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
  }

  .projects .section-wrapper:nth-of-type(2) {
    margin-top: 50px;
  }

  hr.projects {
    display: none;
  }

  .project-item.first,
  .project-item.second,
  .project-item.third,
  .project-item.forth {
    width: 100%;
    padding: 0;
    border: 0;
  }

  .pfmd .nav-indication {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .sections-wrapper,
  .hero {
    padding: 0 10px;
  }

  .synergist-nav__wrapper {
    padding: 10px;
  }

  .hero-content--image {
    flex-direction: column;
    align-items: flex-start;
  }

  .sections-wrapper,
  .side-nav--wrapper {
    grid-template-columns: 1fr;
  }
  .graphic-wrapper {
    display: none;
  }

  .margin-top-300,
  .margin-top-200,
  .margin-top-180 {
    margin-top: 100px;
  }

  .content-wrapper--hero {
    padding: 70px 0 200px;
  }

  .bottom-navigation-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .splide.partners-slider li {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .nav-indication {
    max-width: 320px;
  }

  ul.splide__list {
    align-items: flex-start;
  }

  .right-content.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .no-decoration {
    text-decoration-line: none !important;
  }
}